<template>
  <div class="teachers_page">
    <!-- <div style="display:flex;align-items: center;justify-content: space-between;margin:0 0 10px;">
      <div style="display:flex;align-items: center;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户名">
            <el-input clearable size="small" v-model="formInline.name" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select clearable size="small" v-model="formInline.state" placeholder="请选择">
              <el-option
                v-for="item in [{
                  value: '1',
                  label: '启用'
                },{
                  value: '0',
                  label: '禁用'
                },]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否过期">
            <el-select clearable size="small" v-model="formInline.isExpire" placeholder="请选择">
              <el-option
                v-for="item in [{
                  value: '1',
                  label: '未过期'
                },{
                  value: '2',
                  label: '已过期'
                },]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员等级">
            <el-select clearable size="small" v-model="formInline.isExpire" placeholder="请选择">
              <el-option
                v-for="item in [{
                  value: '1',
                  label: '基础会员'
                },{
                  value: '2',
                  label: 'SIAOA'
                },{
                  value: '3',
                  label: 'FIAOMC'
                },{
                  value: '4',
                  label: 'IAOA'
                },]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
        <el-button size="small" @click="reset">重置</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" @click="openFreeModal">设置会员费</el-button>
        <el-button size="small" type="primary" @click="openHistory">无证审批</el-button>
      </div>
    </div>-->

    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      empty-text="暂无数据"
    >
      <!-- <el-table-column label="ID" width="100">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>-->
      <el-table-column label="证书名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="证书级别">
        <template slot-scope="scope">{{ scope.row.level }}</template>
      </el-table-column>
      <el-table-column label="有效年限">
        <template slot-scope="scope">{{ scope.row.expireYear }}年</template>
      </el-table-column>
      <el-table-column label="激活费用">
        <template slot-scope="scope">{{ scope.row.fee }}元</template>
      </el-table-column>
      <el-table-column label="激活证书积分抵扣比例" width="200">
        <template slot-scope="scope">1积分 = {{scope.row.scoreRate}}</template>
      </el-table-column>
      <el-table-column label="制作邮寄费用">
        <template slot-scope="scope">{{ scope.row.repairFee }}元</template>
      </el-table-column>
      <!-- <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag style="cursor:pointer;" size="small" v-if="scope.row.state == 0" type="danger">禁用</el-tag>
          <el-tag style="cursor:pointer;" size="small" v-else type="success">启用</el-tag>
        </template>
      </el-table-column>-->
      <el-table-column fixed="right" label="操作" width="400">
        <template slot-scope="scope">
          <!-- <el-button
            @click="changeState(scope.row, 0)"
            type="text"
            style="color:#ff0000;"
            v-if="scope.row.state == 1"
          >禁用</el-button>
          <el-button @click="changeState(scope.row, 1)" type="text" v-else>启用</el-button>
          <el-divider direction="vertical"></el-divider>-->
          <el-button @click="openCert(scope.row)" type="text">编辑</el-button>
          <!-- <el-divider direction="vertical"></el-divider>
          <el-button
            :disabled="scope.row.level == 4"
            @click="openViewCert(scope.row)"
            type="text"
          >生成证书</el-button> -->
          <el-divider direction="vertical"></el-divider>
          <el-button
            @click="openPoint(scope.row)"
            type="text"
          >积分抵扣设置</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button
            v-if="scope.row.level == 1"
            @click="openApply(scope.row)"
            type="text"
          >证书申请列表</el-button>
          <el-divider v-if="scope.row.level == 1" direction="vertical"></el-divider>
          <el-button
            @click="openCertPerson(scope.row)"
            type="text"
          >发放证书</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button
            @click="openCertLogsit(0, scope.row)"
            type="text"
          >电子证书申请</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button
            @click="openCertLogsit(1, scope.row)"
            type="text"
          >纸质证书申请</el-button>
          <!-- <el-divider direction="vertical"></el-divider>
        <el-popconfirm
          @onConfirm="del(scope.row)"
          confirm-button-text='确定'
          cancel-button-text='取消'
          icon="el-icon-info"
          icon-color="red"
          title="是否删除本条数据？">
          <el-button  slot="reference" type="text" style="color:#ff0000;">删除</el-button>
          </el-popconfirm>-->
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:10px 0 0 0;text-align:right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageObj.pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="pageObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageObj.total"
      ></el-pagination>
    </div>

    <el-dialog title="设置会员费" :visible.sync="freeModal">
      <el-form :model="form">
        <el-form-item style="margin-bottom:20px" label-width="100px" label="基础会员价格">
          <el-input
            style="width:230px;margin-right:20px;"
            v-model="form.price0"
            autocomplete="off"
            placeholder="请输入首次价格"
          ></el-input>
          <el-input
            style="width:230px;"
            v-model="form.price1"
            autocomplete="off"
            placeholder="请输入续费价格"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="SIAOA">
          <el-input v-model="form.price2" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="FIAOMC">
          <el-input v-model="form.price3" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="IAOA">
          <el-input v-model="form.price4" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFree">取 消</el-button>
        <el-button type="primary" @click="saveFree">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="发放证书" :visible.sync="sendModal">
      <el-form :model="sendForm">
        <el-form-item style="margin-bottom:20px" label-width="100px" label="会员等级">
          <el-radio-group v-model="sendForm.level">
            <el-radio label="1">基础会员</el-radio>
            <el-radio label="2">SIAOA</el-radio>
            <el-radio label="3">FIAOMC</el-radio>
            <el-radio label="4">IAOA</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="发放渠道">
          <el-radio-group v-model="sendForm.channel">
            <el-radio label="1">电子版</el-radio>
            <el-radio label="2">快递</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="sendForm.channel == 1"
          style="margin-bottom:20px"
          label-width="100px"
          label="邮箱地址"
        >
          <el-input v-model="form.email" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item
          v-if="sendForm.channel == 2"
          style="margin-bottom:20px"
          label-width="100px"
          label="快递单号"
        >
          <el-input v-model="form.danNum" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSend">取 消</el-button>
        <el-button type="primary" @click="saveSend">确 定</el-button>
      </div>
    </el-dialog>

    <el-drawer title="证书申请列表" :visible.sync="applyModal" direction="rtl" size="70%">
      <div style="margin-bottom:20px;">
        <el-select
          size="small"
          clearable
          style="margin:0 10px 0 30px;"
          v-model="applyObj.applyState"
          placeholder="请选择审核状态"
        >
          <el-option
            v-for="item in [{
              value: '0',
              label: '待审核'
            },{
              value: '1',
              label: '已通过'
            },{
              value: '2',
              label: '已拒绝'
            }]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input v-model="applyObj.mobile" autocomplete="off" placeholder="请输入手机号" size="small" style="width: 200px;;margin-right:20px;"></el-input>
        <el-button @click="getApplyList" size="small" type="primary">查询</el-button>
        <el-button @click="resetApply" size="small" type="primary">重置</el-button>
      </div>
      <div style="padding: 0 30px;">
        <el-table
          ref="multipleTable"
          v-loading="applyLoading"
          :data="applyList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          empty-text="暂无数据"
          max-height="500"
        >
          <el-table-column label="证书名称" width="200">
            <template
              slot-scope="scope"
            >{{ scope.row.certificateDetail && scope.row.certificateDetail.name }}</template>
          </el-table-column>
          <el-table-column label="申请附件" width="330">
            <template slot-scope="scope">
              <img
                @click="viewImage(item)"
                v-for="(item, index) in scope.row.pictureKVList"
                :key="index"
                :src="item.url"
                style="width:90px;height:90px;margin-right:10px;"
                alt
              />
            </template>
          </el-table-column>
          <el-table-column label="申请用户昵称" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.nickname }}</template>
          </el-table-column>
          <el-table-column label="申请用户真实姓名" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.realName }}</template>
          </el-table-column>
          <el-table-column label="申请用户姓名拼音" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.pinyinName }}</template>
          </el-table-column>
          <el-table-column label="申请用户手机号" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.mobile }}</template>
          </el-table-column>
          <el-table-column label="申请用户邮箱" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.email }}</template>
          </el-table-column>
          <el-table-column label="申请用户地址" width="200">
            <template slot-scope="scope">{{ scope.row.email }}</template>
          </el-table-column>
          <el-table-column label="申请时间" width="200">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="申请状态" width="100">
            <template slot-scope="scope">
              <el-tag
                style="cursor:pointer;"
                size="small"
                v-if="scope.row.applyState == 0"
                type="info"
              >待审核</el-tag>
              <el-tag
                style="cursor:pointer;"
                size="small"
                v-else-if="scope.row.applyState == 1"
                type="success"
              >已通过</el-tag>
              <el-tag style="cursor:pointer;" size="small" v-else type="danger">已拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="申请备注" width="200">
            <template slot-scope="scope">{{ scope.row.memo }}</template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="审核备注" width="200">
            <template slot-scope="scope">{{ scope.row.reason }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="openApplyResult(scope.row)" type="text">审批</el-button>
              <el-divider direction="vertical"></el-divider>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin:10px 0 0 0;text-align:right;">
          <el-pagination
            @size-change="handleSizeApplyChange"
            @current-change="handleCurrentApplyChange"
            :current-page="applyObj.pageNum"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="applyObj.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="applyObj.total"
          ></el-pagination>
        </div>
      </div>
    </el-drawer>

    <el-drawer
      :title="certLogisticsTitle"
      :visible.sync="certLogisticsModal"
      direction="rtl"
      size="70%"
    >
      <div style="margin-bottom:20px;">
        <!-- <el-select
          size="small"
          clearable
          style="margin:0 10px 0 30px;"
          v-model="certLogisticsSearchObj.logisticsState"
          placeholder="请选择发放状态"
        >
          <el-option
            v-for="item in [{
              value: '0',
              label: '未发送'
            },{
              value: '1',
              label: '已经发'
            }]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          v-if="certLogisticsType == 1"
          size="small"
          clearable
          style="margin:0 10px 0 30px;"
          v-model="certLogisticsSearchObj.payState"
          placeholder="请选择支付状态"
        >
          <el-option
            v-for="item in [{
              value: '0',
              label: '未支付'
            },{
              value: '1',
              label: '已支付'
            }]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->
        <el-input
            style="width:230px;margin:0 10px 0 30px;"
            v-model="certLogisticsSearchObj.mobile"
            autocomplete="off"
            placeholder="请输入手机号"
            size="small"
            clearable
          ></el-input>
        <el-button @click="getCertLogisticsList" size="small" type="primary">查询</el-button>
        <!-- <el-button @click="resetCertLogisticsList" size="small" type="primary">重置</el-button> -->
      </div>
      <div style="padding: 0 30px;">
        <el-table
          ref="multipleTable"
          v-loading="certLogisticsLoading"
          :data="certLogisticsList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          empty-text="暂无数据"
          max-height="500px"
        >
          <el-table-column label="证书名称" width="200">
            <template
              slot-scope="scope"
            >{{ scope.row.certificateDetail && scope.row.certificateDetail.name }}</template>
          </el-table-column>
          <el-table-column label="证书类型" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 0">电子证书</div>
              <div v-else>纸质证书</div>
            </template>
          </el-table-column>
          <el-table-column label="用户昵称" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.nickname }}</template>
          </el-table-column>
          <el-table-column label="真实姓名" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.realName }}</template>
          </el-table-column>
          <el-table-column label="用户手机号" width="200">
            <template slot-scope="scope">{{ scope.row.userDetail.mobile }}</template>
          </el-table-column>
          <el-table-column label="联系方式" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 0">{{ scope.row.userDetail.email }}</div>
              <div v-else>{{ scope.row.addressDetail.province }}{{ scope.row.addressDetail.city }}{{ scope.row.addressDetail.district }}{{ scope.row.addressDetail.detail }}</div>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" width="200">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="申请状态" width="100">
            <template slot-scope="scope">
              <el-tag
                style="cursor:pointer;"
                size="small"
                v-if="scope.row.logisticsState == 0"
                type="info"
              >未发放</el-tag>
              <el-tag
                style="cursor:pointer;"
                size="small"
                v-else-if="scope.row.logisticsState == 1"
                type="success"
              >已发放</el-tag>
              <el-tag style="cursor:pointer;" size="small" v-else type="danger">已拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="openCertModal(scope.row)" type="text">审批</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin:10px 0 0 0;text-align:right;">
          <el-pagination
            @size-change="handleSizeSupplyChange"
            @current-change="handleCurrentSupplyChange"
            :current-page="certLogisticsSearchObj.pageNum"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="certLogisticsSearchObj.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="certLogisticsSearchObj.total"
          ></el-pagination>
        </div>
      </div>
    </el-drawer>

    <el-dialog title="审核" :visible.sync="certModal">
      <el-form>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="审核结果">
          <el-radio-group v-model="certResult">
            <el-radio label="1">发放证书</el-radio>
            <el-radio label="2">拒发证书</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item  style="margin-bottom:20px" v-if="certObj.type==0" label="上传证书" label-width="100px">
          <el-upload
            :class="uploadUrl!=''?'hiddenUpload':''"
            action="https://service.bairicun.com/file/upload"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item
          style="margin-bottom:20px"
          label-width="100px"
          :label="certObj.type==0?'邮箱地址':'快递单号'"
        >
          <el-input
            v-if="certObj.type==0"
            v-model="certAddress"
            maxlength="100"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
          <el-input
            v-else
            v-model="logisticsNo"
            maxlength="100"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="certModal = false">取 消</el-button>
        <el-button type="primary" @click="saveCert">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="审核" :visible.sync="personModal">
      <el-form :model="sendForm">
        <el-form-item style="margin-bottom:20px" label-width="100px" label="姓名">张三</el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="手机号">13333333333</el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="备注">33333</el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="附件">图片列表</el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="审核结果">
          <el-radio-group v-model="personResult">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="意见">
          <el-input
            type="textarea"
            :rows="4"
            v-model="personNotes"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="personModal = false">取 消</el-button>
        <el-button type="primary" @click="personModal = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="证书审核" :visible.sync="zhengModal">
      <el-form :model="sendForm">
        <el-form-item style="margin-bottom:20px" label-width="100px" label="姓名">张三</el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="手机号">13333333333</el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="审核结果">
          <el-radio-group v-model="zhengType">
            <el-radio label="1">基础会员</el-radio>
            <el-radio label="2">SIAOA</el-radio>
            <el-radio label="3">FIAOMC</el-radio>
            <el-radio label="4">IAOA</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="100px" label="有效期限">
          <el-date-picker
            style="width:100%;"
            size="small"
            v-model="zhengdate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="zhengModal = false">取 消</el-button>
        <el-button type="primary" @click="zhengModal = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="editName" :visible.sync="editModal">
      <el-form :model="sendForm">
        <el-form-item style="margin-bottom:20px" label-width="100px" label="有效年限">
          <el-input v-model="editObj.expireYear" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="激活费用">
          <el-input v-model="editObj.fee" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="制作邮寄费用">
          <el-input v-model="editObj.repairFee" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editModal = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看图片" width="70%" :visible.sync="imgModal">
      <div>
        <img :src="imgSrc" style="width:100%;" alt />
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button @click="imgModal = false">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="审核" :visible.sync="applyResultModal">
      <el-form>
        <el-form-item style="margin-bottom:20px" label-width="100px" label="审核结果">
          <el-radio-group v-model="applyResult">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          style="margin-bottom:20px"
          label-width="100px"
          label="审核备注"
          :required="applyResult == 2"
        >
          <el-input
            type="textarea"
            v-model="applyResultReject"
            :rows="4"
            :maxlength="400"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="applyResultModal = false">取 消</el-button>
        <el-button type="primary" @click="saveApplyResult">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="证书激活积分抵扣设置" :visible.sync="pointModal">
      <el-form>
        <div style="margin-bottom:20px;">
          <span style="color:#ff0000;">*</span>说明：输入框输入0.1就是相当于1积分抵扣1毛钱
        </div>
        <el-form-item style="margin-bottom:20px" label-width="200px" label="积分抵扣比例设置">
          <el-input v-model="pointValue" maxlength="100" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pointModal = false">取 消</el-button>
        <el-button type="primary" @click="confirmPoint">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog destroy-on-close title="发放证书" top="5vh" width="80%" :visible.sync="certPersonModal">
      <div>
        <div style="margin-bottom:20px;display:flex;align-items:center;">
          <div>真实姓名：</div>
          <el-input clearable size="small" style="width:200px;" v-model="certSearchObj.realName" placeholder="真实姓名"></el-input>
          <div style="margin-left:20px;">手机号：</div>
          <el-input clearable size="small" style="width:200px;"  v-model="certSearchObj.mobile" placeholder="手机号"></el-input>
          <el-button style="margin-left:20px;" @click="getCertPersonList" size="small" type="primary">查询</el-button>
          <el-button @click="resetCertPersonList" size="small" type="primary">重置</el-button>
        </div>
        <el-table
          ref="multipleTablePerson"
          v-loading="certPersonLoading"
          :data="certPersonList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          empty-text="暂无数据"
          row-key="id"
          @select-all="selectAll"
          @select="handleSelectionChange"
        >
          <el-table-column reserve-selection type="selection" width="55"></el-table-column>
          <el-table-column label="证书名称" width="200">
            <template slot-scope="scope">
              <div v-if="certPersonObjXXX.level == 1">IAOA基础</div>
              <div v-if="certPersonObjXXX.level == 2">IAOA提高</div>
              <div v-if="certPersonObjXXX.level == 3">SIAOA</div>
              <div v-if="certPersonObjXXX.level == 4">FIAOMC</div>
            </template>
          </el-table-column>
          <el-table-column label="用户昵称" width="100">
            <template slot-scope="scope">{{ scope.row.nickname }}</template>
          </el-table-column>
          <el-table-column label="真实姓名" width="100">
            <template slot-scope="scope">{{ scope.row.realName }}</template>
          </el-table-column>
          <el-table-column label="头像">
            <template slot-scope="scope">
              <img
                style="width:40px;height:40px;"
                :src="scope.row.avatar?scope.row.avatar:'/images/avatar.png'"
                alt
              />
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="120">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="性别" width="100">
            <template slot-scope="scope">{{ scope.row.gender==1?'男':'女' }}</template>
          </el-table-column>
          <el-table-column label="生日" width="100">
            <template slot-scope="scope">{{ scope.row.birthday }}</template>
          </el-table-column>
          <el-table-column label="公司" width="100">
            <template slot-scope="scope">{{ scope.row.company }}</template>
          </el-table-column>
          <el-table-column label="职称" width="100">
            <template slot-scope="scope">{{ scope.row.jobTitle }}</template>
          </el-table-column>
          <el-table-column label="邮箱" width="100">
            <template slot-scope="scope">{{ scope.row.email }}</template>
          </el-table-column>
          <el-table-column label="会员等级" width="200">
            <template slot-scope="scope">{{ scope.row.level==0?'非会员':`${scope.row.level}级` }}</template>
          </el-table-column>
          <el-table-column label="用户积分" width="200">
            <template slot-scope="scope">
              <div style="display:flex;align-items:center;">
                <div style="color:#66b1ff;">{{ scope.row.score }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="openViewCert(scope.row)"
                type="text"
              >生成证书</el-button>
              <el-button
                @click="openViewCertInfo(scope.row)"
                type="text"
              >证书信息</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin:10px 0 0 0;text-align:right;">
          <el-pagination
            @size-change="handleSizeCertChange"
            @current-change="handleCurrentCertChange"
            :current-page="certPersonObj.pageNum"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="certPersonObj.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="certPersonObj.total"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="certPersonModal = false">取 消</el-button>
        <el-button type="primary" @click="savePersonCert">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog destroy-on-close top="2vh" width="1250px" title="生成证书" :visible.sync="downLoadImageModal">
      <div ref="imageTest" style="width: 1200px;position:relative;color:#333;">
        <img v-if="certPersonObjXXX.id == 1" src="http://img.visionbook.cn/iaoalevbig1.jpg" style="width:1200px;" alt />
        <img v-if="certPersonObjXXX.id == 2" src="http://img.visionbook.cn/iaoalevbig2.jpg" style="width:1200px;" alt />
        <img v-if="certPersonObjXXX.id == 3" src="http://img.visionbook.cn/iaoalevbig3.jpg" style="width:1200px;" alt />
        <!-- <div
          style="position:absolute;top:460px;width:100%;text-align:center;font-size:20px;font-weight:bold;"
        >证书编号：{{certDetailObj.certificateNo}}</div> -->
        <div
          style="position:absolute;top:470px;width:100%;text-align:center;font-size:50px;font-weight:bold;"
        >{{certRow.realName?certRow.realName:'暂未设置'}}</div>
        <div
          style="position:absolute;top:530px;width:100%;text-align:center;font-size:30px;font-weight:bold;"
        >{{certRow.pinyinName?certRow.pinyinName:'暂未设置'}}</div>
        <div
          style="position:absolute;left:160px;bottom:36px;padding-right:110px;font-size:18px;font-weight:bold;"
        >
          <!-- <div style="width:150px;height:150px;background:red;margin-bottom:10px;"></div> -->
          <div id="qrcode" ref="qrcode" style="margin-bottom:10px;"></div>
          <div style="width:100%;text-align:center;font-size:20px;">验证二维码</div>
        </div>
        <div
          style="position:absolute;bottom:40px;width:100%;text-align:right;padding-right:180px;font-size:18px;font-weight:bold;"
        >证书编号：{{certDetailObj.certificateNo}}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="downLoadImageModal = false">关 闭</el-button>
        <el-button type="primary" @click="setCanvas">下载证书</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCouponListApi,
  changeStateApi,
  getCertificateListApi,
  saveCertificateApi,
  getApplyListApi,
  applyResultApi,
  getCertPersonListApi,
  saveCertPersonApi,
  getCertLogisticsListApi,
  getCertUserDetailApi,
  saveUserCertificateLogisticsApi,
  sendEmailApi,
} from "@/api/cert";
import { getUserListApi } from "@/api/user";

import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      list: [],
      listLoading: false,
      currentPage: 1,
      formInline: {
        name: "",
        state: "",
        isExpire: ""
      },
      pageObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      form: {
        price0: "",
        price1: "",
        price2: "",
        price3: "",
        price4: ""
      },
      freeModal: false,
      sendModal: false,
      sendForm: {
        level: "",
        channel: "",
        danNum: "",
        email: ""
      },
      historyModal: false,
      historyList: [1],
      personModal: false,
      personNotes: "",
      personResult: "",
      zhengModal: false,
      zhengType: "",
      zhengdate: [],
      editModal: false,
      editObj: {
        id: "",
        fee: "",
        repairFee: "",
        expireYear: ""
      },
      editName: "",
      applyModal: false,
      applyList: [],
      applySearchId: "",
      applyObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        applyState: "",
        mobile: '',
      },
      applyLoading: false,
      imgModal: false,
      imgSrc: "",
      applyResult: "1",
      applyResultModal: false,
      applyResultId: "",
      applyResultReject: "",
      certPersonModal: false,
      certPersonId: "",
      certPersonLoading: false,
      certPersonList: [],
      certPersonObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      selectPersonList: [],
      certPersonObjXXX: {},
      certLogisticsTitle: "",
      certLogisticsType: 0,
      certLogisticsObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      certLogisticsModal: false,
      certLogisticsSearchObj: {
        type: "",
        payState: "",
        logisticsState: "",
        mobile: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      certLogisticsCertificateId: "",
      certLogisticsList: [],
      certLogisticsLoading: false,
      pointModal: false,
      pointValue: "",
      downLoadImageModal: false,
      imgUrl: "",
      cvImg: "",
      pointObj: {},
      certRow: {},
      certDetailObj: {},
      certResult: '1',
      certModal: false,
      certAddress: '',
      logisticsNo: '',
      certObj: {},
      uploadUrl: '',
      uploadImgId: '',
      dialogImageUrl: '',
      dialogVisible: false,
      uploadStatus: false,
      certSearchObj: {
        mobile: '',
        name: '',
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleRemove(file, fileList) {
      this.uploadUrl = ''
      this.uploadImgId = ''
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(e) {
      if(e.code == 200) {
        this.uploadStatus = true
        this.uploadUrl = e.data.url
        this.uploadImgId = e.data.id
      }
    },
    openCertModal(row) {
      this.certObj = row
      this.certResult = '1'
      this.certModal = true
      if(row.type == 0) {
        this.certAddress = row.userDetail.email
      } else {
        this.uploadImgId = ''
      }
    },
    saveCert() {
      // if(this.certObj.type == 0 && this.certResult == 1) {
      //   if(!this.uploadImgId) {
      //     this.$message({
      //       message: "请上传证书！",
      //       type: "error"
      //     });
      //     return false
      //   }
      // }
      saveUserCertificateLogisticsApi({
        type: this.certObj.type,
        id: this.certObj.id,
        userId: this.certObj.userId,
        certificateId: this.certObj.certificateId,
        email: this.certAddress,
        logisticsNo: this.logisticsNo,
        logisticsState: this.certResult,
        picId: this.uploadImgId,
      }).then((res) => {
        this.certModal = false
        this.$message({
          message: "操作成功！",
          type: "success"
        });
        // if(this.certObj.type == 0 && this.certResult == 1) {
        //   sendEmailApi({
        //     email: this.certAddress,
        //     picId: this.uploadImgId
        //   }).then((resp) => {

        //   })
        // }
        this.getCertLogisticsList()
      })
    },
    qrcode (userId, certificateId) {
      let urlsss = `http://h5.visualbook.cn/search?userId=${userId}&certificateId=${certificateId}`
      let qrcode = new QRCode('qrcode', {
        width: 150,
        height: 150, // 高度
        text: urlsss, // 要生成二维码的链接（或当前页面地址）
        // render: 'canvas',
        // colorDark: '#000',
        // colorLight: '#fff',
        // correctLevel: QRCode.CorrectLevel.H
      })
    },
    setCanvas() {
      const canvas = document.createElement("canvas");
      // 获取要生成图片的 DOM 元素
      let canvasDom = this.$refs.imageTest;
      // 获取指定的宽高
      const width = parseInt(window.getComputedStyle(canvasDom).width);
      const height = parseInt(window.getComputedStyle(canvasDom).height);
      console.log(width)
      console.log(height)
      // 宽高扩大 2 倍 处理图片模糊
      canvas.width = width * 2;
      canvas.height = height * 2;
      canvas.style.width = width / 2 + "px";
      canvas.style.height = height / 2 + "px";
      const context = canvas.getContext("2d");
      context.scale(1, 1);
      const options = {
        useCORS: true,
        width: window.screen.availWidth,
        height: window.screen.availHeight,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight,
        x:0,
        y:window.pageYOffset
      };
      html2canvas(canvasDom, options).then(canvas => {
        // 生成图片地址
        this.imgUrl = canvas.toDataURL("image/jpeg", 1);
        this.cvImg = this.imgUrl;
        console.log(this.cvImg);
        this.downloadFile("2222", this.cvImg);
      });
    },
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },
    downloadFile(fileName, content) {
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(content); //new Blob([content]);

      let evt = document.createEvent("HTMLEvents");
      console.log("点击下载", evt);
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);

      // aLink.dispatchEvent(evt);
      aLink.click();
    },
    openViewCert(row) {
      getCertUserDetailApi(row.id, this.certPersonObjXXX.id).then((res) => {
        if(res.data&&res.data.id) {
          // this.certRow = row
          // this.downLoadImageModal = true;
          // this.certDetailObj = res.data
          // setTimeout(() => {
          //   this.qrcode(row.id, this.certPersonObjXXX.id)
          // }, 1000);
          // this.$router.push({
          //   path: `/certDetail?userId=${row.id}&certId=${this.certPersonObjXXX.id}`
          // })
          window.open(`#/certDetail?userId=${row.id}&certId=${this.certPersonObjXXX.id}`)
        } else {
          this.$message({
            message: "该用户暂未获取证书！",
            type: "error"
          });
        }
      })
      // this.getQC()
    },
    openViewCertInfo(row) {
      getCertUserDetailApi(row.id, this.certPersonObjXXX.id).then((res) => {
        if(res.data&&res.data.id) {
          // this.certRow = row
          // this.downLoadImageModal = true;
          // this.certDetailObj = res.data
          // setTimeout(() => {
          //   this.qrcode(row.id, this.certPersonObjXXX.id)
          // }, 1000);
          // this.$router.push({
          //   path: `/certDetail?userId=${row.id}&certId=${this.certPersonObjXXX.id}`
          // })
          window.open(`#/certinfo?userId=${row.id}&certId=${this.certPersonObjXXX.id}`)
        } else {
          this.$message({
            message: "该用户暂未获取证书！",
            type: "error"
          });
        }
      })
      // this.getQC()
    },
    openPoint(row) {
      this.pointObj = row
      this.pointValue = row.scoreRate;
      this.pointModal = true;
    },
    confirmPoint() {
      saveCertificateApi({
        id: this.pointObj.id,
        scoreRate: this.pointValue,
      }).then(res => {
        this.pointModal = false;
        this.fetchData();
      });
    },
    openCertLogsit(type, obj) {
      this.certLogisticsType = type;
      this.certLogisticsCertificateId = obj.id;
      this.certLogisticsSearchObj.pageNum = 1
      if (type == 0) {
        this.certLogisticsTitle = "电子证书申请列表";
      } else {
        this.certLogisticsTitle = "纸质证书申请列表";
      }
      this.getCertLogisticsList();
      this.certLogisticsModal = true;
    },
    getCertLogisticsList() {
      this.certLogisticsLoading = false;
      getCertLogisticsListApi({
        certificateId: this.certLogisticsCertificateId,
        type: this.certLogisticsType,
        mobile: this.certLogisticsSearchObj.mobile,
        logisticsState: this.certLogisticsSearchObj.logisticsState,
        payState: this.certLogisticsSearchObj.payState,
        pageSize: this.certLogisticsSearchObj.pageSize,
        pageNum: this.certLogisticsSearchObj.pageNum,
      }).then(res => {
        this.certLogisticsLoading = false;
        this.certLogisticsList = res.data.result;
        this.certLogisticsSearchObj.total = res.data.total;
      });
    },
    handleSizeSupplyChange(val) {
      this.certLogisticsSearchObj.pageSize = val;
      this.getCertLogisticsList();
    },
    handleCurrentSupplyChange(val) {
      this.certLogisticsSearchObj.pageNum = val;
      this.getCertLogisticsList();
    },
    resetCertLogisticsList() {
      this.certLogisticsSearchObj.type = "";
      this.certLogisticsSearchObj.payState = "";
      this.certLogisticsSearchObj.logisticsState = "";
      this.certLogisticsSearchObj.pageSize = 10;
      this.certLogisticsSearchObj.pageNum = 1;
      this.getCertLogisticsList();
    },
    savePersonCert() {
      console.log(this.selectPersonList);
      saveCertPersonApi({
        userIds: this.selectPersonList,
        certificateId: this.certPersonObjXXX.id
      }).then(res => {
        this.$message({
          message: "操作成功！",
          type: "success"
        });
        this.certPersonModal = false;
        this.pageObj.pageNum = 1;
        this.fetchData();
      });
    },
    handleSelectionChange(e, row) {
      console.log(e);
      if (this.selectPersonList.indexOf(String(row.id)) > -1) {
        this.selectPersonList = this.selectPersonList.filter(item => {
          return item != row.id;
        });
      } else {
        this.selectPersonList.push(String(row.id));
      }
    },
    selectAll(e) {
      console.log(e);
      if (e.length) {
        e.forEach(item => {
          this.selectPersonList.push(String(item.id));
        });
        this.selectPersonList = [...new Set(this.selectPersonList)];
      } else {
        let tableArray = this.certPersonList.map(item => String(item.id));
        this.selectPersonList = this.selectPersonList.filter(items => {
          if (!tableArray.includes(items)) {
            return items;
          }
        });
      }
    },
    openCertPerson(row) {
      this.certPersonObj.pageNum = 1
      this.certPersonObj.pageSize = 10
      this.certPersonModal = true;
      this.certPersonObjXXX = row;
      this.getCertPersonList();
    },
    resetCertPersonList() {
      this.certSearchObj.realName = ''
      this.certSearchObj.mobile = ''
      this.certPersonObj.pageNum = 1
      this.certPersonObj.pageSize = 10
      this.getCertPersonList()
    },
    getCertPersonList() {
      this.certPersonLoading = true;
      getUserListApi({
        realName: this.certSearchObj.realName,
        mobile: this.certSearchObj.mobile,
        pageNum: this.certPersonObj.pageNum,
        pageSize: this.certPersonObj.pageSize,
        state: 1
      }).then(res => {
        this.certPersonLoading = false;
        this.certPersonList = res.data.result;
        this.certPersonObj.total = res.data.total;
        this.getPersonCertList();
      });
    },
    getPersonCertList() {
      getCertPersonListApi(this.certPersonObjXXX.id).then(res => {
        this.selectPersonList = res.data;
        let that = this;
        this.$nextTick(() => {
          for (let i = 0; i < that.certPersonList.length; i++) {
            for (let j = 0; j < that.selectPersonList.length; j++) {
              if (that.certPersonList[i].id == that.selectPersonList[j]) {
                that.$refs.multipleTablePerson.toggleRowSelection(
                  that.certPersonList[i],
                  true
                );
              }
            }
          }
        });
      });
    },
    handleSizeCertChange(val) {
      this.certPersonObj.pageSize = val;
      this.getCertPersonList();
    },
    handleCurrentCertChange(val) {
      this.certPersonObj.pageNum = val;
      this.getCertPersonList();
    },
    openApplyResult(row) {
      this.applyResultId = row.id;
      this.applyResult = "1";
      this.applyResultModal = true;
      this.applyResultReject = "";
    },
    saveApplyResult() {
      if (this.applyResult == 2) {
        if (this.applyResultReject) {
          applyResultApi({
            id: this.applyResultId,
            applyState: this.applyResult,
            reason: this.applyResultReject
          }).then(res => {
            this.$message({
              message: "操作成功！",
              type: "success"
            });
            this.applyResultModal = false;
            this.applyObj.pageNum = 1;
            this.getApplyList();
          });
        } else {
          this.$message({
            message: "请输入拒绝理由！",
            type: "error"
          });
        }
      } else {
        applyResultApi({
          id: this.applyResultId,
          applyState: this.applyResult,
          reason: this.applyResultReject
        }).then(res => {
          this.$message({
            message: "操作成功！",
            type: "success"
          });
          this.applyResultModal = false;
          this.applyObj.pageNum = 1;
          this.getApplyList();
        });
      }
    },
    viewImage(obj) {
      this.imgModal = true;
      this.imgSrc = obj.url;
    },
    openApply(row) {
      this.applySearchId = row.id;
      this.applyModal = true;
      this.getApplyList();
    },
    resetApply() {
      this.applyObj.pageSize = 10;
      this.applyObj.pageNum = 1;
      this.applyObj.applyState = "";
      this.applyObj.mobile = ''
      this.getApplyList();
    },
    getApplyList() {
      this.applyLoading = true;
      getApplyListApi({
        certificateId: this.applySearchId,
        pageSize: this.applyObj.pageSize,
        pageNum: this.applyObj.pageNum,
        applyState: this.applyObj.applyState,
        mobile: this.applyObj.mobile,
      }).then(res => {
        this.applyLoading = false;
        this.applyList = res.data.result;
        this.applyObj.total = res.data.total;
      });
    },
    handleSizeApplyChange(val) {
      this.applyObj.pageSize = val;
      this.getApplyList();
    },
    handleCurrentApplyChange(val) {
      this.applyObj.pageNum = val;
      this.getApplyList();
    },
    openZheng() {
      this.zhengModal = true;
    },
    openHistory() {
      this.historyModal = true;
    },
    openPerson() {
      this.personModal = true;
    },
    openSendModal() {
      this.sendModal = true;
    },
    cancelSend() {
      this.sendModal = false;
    },
    saveSend() {
      this.sendModal = false;
    },
    saveFree() {
      this.freeModal = false;
    },
    cancelFree() {
      this.freeModal = false;
    },
    openFreeModal() {
      this.freeModal = true;
    },
    exportList() {
      window.open(`https://service.visualbook.cn/question/export/1`);
    },
    openCert(row) {
      this.editObj.id = row.id;
      this.editName = row.name;
      this.editObj.fee = row.fee;
      this.editObj.repairFee = row.repairFee;
      this.editObj.expireYear = row.expireYear;
      this.editModal = true;
    },
    saveEdit() {
      saveCertificateApi({
        id: this.editObj.id,
        fee: this.editObj.fee,
        repairFee: this.editObj.repairFee,
        expireYear: this.editObj.expireYear
      }).then(res => {
        this.editModal = false;
        this.fetchData();
      });
    },
    fileSuccess(e) {
      if (e.code == 200) {
        this.$message.success(e.data);
        this.fetchData();
      }
    },
    fileChange(e) {
      if (e.status == "success") {
        if (e.response.code != 200) {
          this.$message.error(e.response.message);
        }
      }
    },
    onSubmit() {
      this.fetchData();
    },
    reset() {
      this.formInline.name = "";
      this.formInline.state = "";
      this.formInline.isExpire = "";
      this.pageObj.pageSize = 10;
      this.pageObj.pageNum = 1;
      this.fetchData();
    },
    changeState(row, state) {
      changeStateApi({
        id: row.id,
        state: state
      }).then(res => {
        this.fetchData();
      });
    },
    del(row) {
      deleteGoodsApi({
        ids: row.id
      }).then(res => {
        this.fetchData();
      });
    },
    edit(row) {
      console.log(row);
      this.$router.push({
        path: "/repurchase/edit",
        query: {
          editId: row.id
        }
      });
    },
    add() {
      this.$router.push({
        path: "/marketing/addCoupon"
      });
    },
    fetchData() {
      this.listLoading = true;
      getCertificateListApi({
        name: this.formInline.name,
        state: this.formInline.state,
        isExpire: this.formInline.isExpire,
        pageNum: this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize
      }).then(response => {
        this.list = response.data.result;
        this.listLoading = false;
        this.pageObj.total = response.data.total;
      });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageObj.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageObj.pageNum = val;
      this.fetchData();
    }
  }
};
</script>

<style>
.el-table .cell {
  white-space: pre-line;
}
</style>

<style lang="scss" scoped>
.teachers_page {
  padding: 20px;
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
<style>
  .hiddenUpload .el-upload--picture-card{
    display:none !important;
  }
</style>
